<template>
	<view class="content font_family" :style="{paddingTop:menuButtonInfo}">
		<view class="back" @click="back">
			<image src="../../static/msg/back_icon.png" mode=""></image>
		</view>
		<view class="title">
			选择退款方式
		</view>
		<view class="item f_j" v-for="(item,index) in menu" :key="index"
			@click="go(`/pages/order/tk_detail?type=${item.type}&msg=${msg}&order=${order}&status=${status}`)">
			<image class="icon" :src="item.img" mode=""></image>
			<text>{{item.title}}</text>
			<image class="go" src="../../static/public/go_h.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['menuButtonInfo'])
		},
		data() {
			return {
				status: '',
				msg: '',
				order: '',
				menu: [
					{ title: '我要退货退款', type: 1, img: '../../static/order/th_tk.png' },
					{ title: '我要退款', type: 2, img: '../../static/order/tk.png' },
					{ title: '我要换货', type: 3, img: '../../static/order/hh.png' },
				]
			}
		},
		onLoad(e) {
			this.msg = e.msg
			this.order = e.order
			this.status = e.status
			if (e.status == 2) {
				this.menu = [
					{ title: '我要退款', type: 2, img: '../../static/order/tk.png' },
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.back {
			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.title {
			font-weight: 400;
			font-size: 52rpx;
			color: #232323;
			margin: 50rpx 0rpx;
		}

		.item {
			margin-bottom: 30rpx;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.icon {
				width: 66rpx;
				height: 66rpx;
			}

			text {
				margin-left: 28rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #232323;
			}

			.go {
				margin-left: auto;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>